<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-2.4.2/src/css/layui.css">
    <script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/layui-2.4.2/src/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">国家</label>
                <div class="layui-input-inline layuiws">
                    <select name="country_select" lay-filter="country_select" class="country_select">
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width:auto;">城市</label>
                <div class="layui-input-inline layuiws">
                    <select name="city_select" lay-filter="city_select" class="city_select">
                    </select>
                </div>
            </div>

            <button class="layui-btn" id="search">搜索</button>
            <button class="layui-btn" id="addCityCarModel">添加</button>
        </div>
    </div>
</div>
<div class="layui-row">
    <table id="city_price_view" lay-filter="user_filter">
    </table>
</div>
<!--车型编辑浮层-->
<form class="layui-form" id="edit_city_price" action="" style="display:none;margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">国家</label>
        <div class="layui-input-block layui-form" style="margin-right:20px;">
            <select name="countryId" lay-filter="country_form" id="country_form" class="country_form layui-form">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block layui-form" style="margin-right:20px;">
            <select name="cityId" lay-filter="city_form" class="city_form" id="cityId">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">车型</label>
        <div class="layui-input-block model_select" id="carModelId" name="carModelIds">
            <input type="hidden" name="carModelId" id="carModelIds"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">车型上浮比例</label>
        <div class="layui-input-block" style="margin-right: 100px;">
            <input type="text" name="floatingRatio" id="floatingRatio" autocomplete="off" placeholder="请输入车型上浮比例"
                   class="layui-input">
        </div>
    </div>


</form>


</div>
</body>
<!--表格toobar模板-->
<script type="text/html" id="toolOper">
<!--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>

<script>
    layui.use(['element', 'table', 'upload', 'laytpl', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#city_price_view',
            url: '/startPrice/carModelList',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            cols: [
                [
                    {field: 'id', title: '编号', width: 150},
                    {field: 'cityId', title: '城市id', width: 150},
                    {field: 'cityName', title: '城市名称', width: 150},
                    {field: 'modelName', title: '车型', width: 150},
                    {field: 'floatingRatio', title: '车型上浮比例', width: 150},
                    {field: 'right', align: 'center', toolbar: '#toolOper'}
                ]
            ],
            response: {
                status: 'errorCode',
                countName: 'total',
                dataName: 'data'
            }
        });
        $("#search").on('click', function () {
            table.reload('city_price_view', {
                url: '/startPrice/carModelList',
                where: {
                    cityId: $('.city_select').val()
                }
            });
        });

        $('#addCityCarModel').on('click', function () {
            setCarModel();
            editTripCarFunc();
        });


        var editTripCarFunc = function () {
            $.ajax({
                type:'post',
                url:'/tripcar/getCountry',
                cache:false,
                dataType:'json',
                success:function (res) {
                    if(res.success==true){
                        var optionHtml='';
                        $(".country_form").append('<option value="0">请选择</option>');
                        for(var i=0;i<res.data.length;i++){
                            optionHtml+='<option value="'+res.data[i].countryId+'">'+res.data[i].countryName+'</option>';
                        }
                        $(".country_form").append(optionHtml);
                        form.render('select');
                    }
                }
            });
            layer.open({
                type: 1,
                area: ['880px', '600px'],
                content: $("#edit_city_price"),
                btn: ['保存', '取消'],
                btnALign: 'c',
                yes: function () {
                    if ($("#floatingRatio").val() == '') {
                        alert('车型上浮比例不允许为空');
                        return;
                    }

                    var arr = [];
                    $("input:radio[name='carModelId']:checked").each(function (i) {
                        arr[i] = $(this).val();
                    });
                    $('#carModelId').attr('value', arr);
                    if ($("#carModelId").val() == '') {
                        alert('请选择车型');
                        return;
                    }
                    // alert($('#carModelId').val());
                    // alert($('#edit_city_price').serialize());
                    $.ajax({
                        type: 'post',
                        data: $('#edit_city_price').serialize(),
                        url: '/startPrice/editFloatingRatio',
                        cache: false,
                        dataType: 'json',
                        success: function (data) {
                            if (data.success === true) {
                                alert("城市车型添加成功");
                                layer.closeAll();
                                $(".layui-laypage-btn").click()
                            }else {
                                alert(data.msg);
                            }

                        }
                    });
                },
            });
        };


        $.ajax({
            type:'post',
            url:'/tripcar/getCountry',
            cache:false,
            dataType:'json',
            success:function (res) {
                if(res.success==true){
                    var optionHtml='';
                    $(".country_select").append('<option value="0">请选择</option>');
                    for(var i=0;i<res.data.length;i++){
                        optionHtml+='<option value="'+res.data[i].countryId+'">'+res.data[i].countryName+'</option>';
                    }
                    $(".country_select").append(optionHtml);
                    form.render('select');
                }
            }
        });

        form.on('select(country_select)', function (data) {
            var countryId = $('.country_select').val();
            setCityByCountryId(countryId, $('.city_select'), 0);
        });

        form.on('select(country_form)', function (data) {
            var countryId = $('.country_form').val();
            setCityByCountryId(countryId, $('.city_form'), 0);
        });

        function setCityByCountryId(countryId, citySelect, editInitCity) {
            $.ajax({
                type: 'post',
                url: '/tripcar/getCity',
                data: {countryId: countryId},
                cache: false,
                dataType: 'json',
                success: function (citys) {
                    if (citys.success == true) {
                        var optionHtml = '';
                        if (editInitCity <= 0) {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        if (citys.data != null && citys.data.length > 0) {
                            for (var i = 0; i < citys.data.length; i++) {
                                optionHtml += '<option value="' + citys.data[i].cityId + '">' + citys.data[i].cityName + '</option>';
                            }
                        } else {
                            optionHtml = '<option value="0">未选择</option>';
                        }
                        $(citySelect).html('');
                        $(citySelect).append(optionHtml);
                    }
                    form.render('select');
                    if (editInitCity > 0) {
                        var select = 'dd[lay-value=' + editInitCity + ']';
                        $(citySelect).siblings("div.layui-form-select").find('dl').find(select).click();
                    }
                }
            });
        }

        function setCarModel() {
            $(".model_select").html('');
            $.ajax({
                type: 'post',
                url: '/carModel/getCarModels',
                cache: false,
                dataType: 'json',
                success: function (res) {
                    if (res.success == true) {
                        var optionHtml = '';
                        for (let i = 0; i < res.data.length; i++) {
                            optionHtml += '<input type="radio" name="carModelId" value="' + res.data[i].modelId + '" title="' + res.data[i].modelName + '"/>';
                        }
                        $(".model_select").append(optionHtml);
                        form.render('radio');
                    }
                }
            });
        }


        table.on('tool(user_filter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'delete') {
                if (window.confirm('请确认是否将' + data.cityName + data.modelName + '的信息删除')) {
                    $.ajax({
                        type: 'post',
                        data: {id: data.id},
                        url: '/startPrice/delFloatingRatio',
                        cache: false,
                        success: function (data) {
                            if (data.success === true) {
                                alert("信息删除成功!");
                            } else {
                                alert(data.msg);
                            }
                        }
                    })
                }
                table.reload('city_price_view', {
                    url: '/startPrice/carModelList',
                    where: {
                        cityId: $('.city_select').val()
                    }
                });
            }
        });
    });

</script>
</html>